<template>
  <div class="polygon">
    <h1>POLYGON</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      map: null,
      polygonData: [],
    }
  },
  mounted() {
    
  },
  methods: {
    init(options) {
      this.map = options.map;
      this.map.on("click", "polygonFillLayerId", this.polygonLayerClickEvent); // 监听图层点
      this.drawEmptyLayer();
      // polygonData init 
      this.getPolygonData().then((res) => {
        console.log("获取到的polygon的数据 ===>>>", res);
        let data = [];
        res.features.forEach((feature) => {
          let obj = {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: feature.geometry.coordinates, // [[[11,12],[12,34],[12,34]]]
            },
            properties: {
              ...feature.properties,
              highLight: "0", // "0"=>默认； "1"=>高亮；
            }
          }
          data.push(obj);
        });
        this.polygonData = [...data];
        this.setLayerData(this.polygonData); // 初始化layer
      });
    },
    getPolygonData() {
      return new Promise((resolve, reject) => {
        const url = "https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson";
        fetch(url)
          .then(response => response.json())
          .then(data => {
            resolve(data);
          })
          .catch(error => {
            console.error("获取plygon的数据失败 ===>>>::", error);
          });
      })
    },
    drawEmptyLayer() {
      this.map.addSource("polygonSourceId", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [],
        },
      });
      this.map.addLayer({
        id: "polygonFillLayerId",
        type: "fill",
        source: "polygonSourceId",
        layout: {},
        // filter: ["==", ["get", "STATE_ID"], "54"],
        filter: ["<", ["get", "STATE_ID"], "54"],
        paint: {
          "fill-color": [
            "match",
            ["get", "highLight"], // 属性名
            "1", "#f40",   // 属性值1对应的颜色
            /* ... 添加更多的属性值和颜色映射关系 ... */
            "#0080ff"  // 默认颜色，用于匹配不到属性值时
          ],
          "fill-opacity": 0.5,
        },
        minzoom: 5,
        maxzoom: 15,
      });
      this.map.addLayer({
        id: "polygonLineLayerId",
        type: "line",
        source: "polygonSourceId",
        layout: {},
        // filter: ["==", ["get", "STATE_ID"], "54"],
        filter: ["<", ["get", "STATE_ID"], "54"],
        paint: {
          "line-color": [
            "match",
            ["get", "highLight"], // 属性名
            "1", "#fff",   // 属性值1对应的颜色
            /* ... 添加更多的属性值和颜色映射关系 ... */
            "#000"  // 默认颜色，用于匹配不到属性值时
          ], // blue color fill
          "line-width": 1,
        },
        minzoom: 5,
        maxzoom: 15,
      });
    },
    setLayerData(data) {
      const sourceData = {
        type: "FeatureCollection",
        features: data,
      }
      this.map.getSource("polygonSourceId") && this.map.getSource("polygonSourceId").setData(sourceData);
    },
    polygonLayerClickEvent(e) {
      let self = this;
      // 获取点击点的地图特征
      var features = this.map.queryRenderedFeatures(e.point);

      // 遍历特征
      features.forEach(function(feature) {
        self.clearHighLight(); // 清除之前高亮的图层
        // 高亮当前点击图层
        self.polygonData.forEach((item) => {
          if (item.properties.STATE_ID === feature.properties.STATE_ID) {
            item.properties.highLight = "1";
          }
        });
        self.setLayerData(self.polygonData);
      });
    },
    clearHighLight() {
      if (this.polygonData.length > 0) {
        this.polygonData.forEach((item) => {
          item.properties.highLight = "0";
        });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.polygon {
  position: absolute;
  top: 50px;
  left: 10px;
  border: 0.5rem solid #f40;
  width: 300px;
  min-height: 200px;
}
</style>

